<div cdkDropListGroup class="dashboard-group">

  <!-- 次级头部层 -->
  <div class="currentPanel-header">
    <div class="currentPanel-title">{{curCanvas['name']}}</div>
    <div class="currentPanel-button">
      <button apes-button (click)="onEvent('add')">添加小程序</button>
      <button apes-button (click)="onEvent('compose')">编辑排版</button>
      <apes-dropdown [apesPlacement]="'bottomRight'" [apesTrigger]="'click'">
        <button apes-button apes-dropdown>···</button>
        <ul apes-menu apesSelectable>
          <li apes-menu-item (click)="moreTool()">
            <span>复制面板</span>
          </li>
          <li apes-menu-item (click)="moreTool()">
            <span>删除面板</span>
          </li>
          <li apes-menu-item (click)="moreTool()">
            <span>编辑面板</span>
          </li>
          <li apes-menu-item (click)="moreTool()">
            <span>新增面板</span>
          </li>
        </ul>
      </apes-dropdown>

    </div>
  </div>

  <!-- 主体层 -->
  <ul
    cdkDropList
    *ngFor="let list of areas;let i =index"

    [ngStyle]="{'width': layoutModel.layout[i]}"
    [cdkDropListData]="list"
    class="currentPanel-list"
    (cdkDropListDropped)="drop($event)">
    <li class="currentPanel-box" *ngFor="let item of list" cdkDrag>
      <div class="currentPanel-custom-placeholder" *cdkDragPlaceholder>将小程序拖入这里</div>
      <div class="currentPanel-box-header" cdkDragHandle>
        <div class="currentPanel-box-line"></div>
        <div class="currentPanel-box-title">{{item.applet.widget.id}}</div>
      </div>
      <div class="currentPanel-box-main">
        <dynamic [componentName]="item.applet.widget.id" [params]="areas" [data]="item" (dyanmicOut)="saveCurPosition($event)"></dynamic>
      </div>
    </li>
    <li *ngIf="list.length ==0" [class.special]="true">
      将小程序拖入这里或者
      <button apes-button apesType="primary" (click)="openAppletAddDialog(i)">添加新的小程序</button>
    </li>
  </ul>

</div>

<!-- 添加小程序 -->
<apes-modal [(apesVisible)]="addAppletVisible"
            [apesTitle]="appletTitle"
            [apesContent]="appletContent"
            [apesWidth]="980"
            [apesFooter]="null"
            [apesClassName]="'applet-main'"
            (apesOnCancel)="closeCanvasDialog()">
  <ng-template #appletTitle>
    添加小程序
  </ng-template>

  <ng-template #appletContent>
    <div class="modal-applet-main">
      <div class="modal-applet-search">
        <apes-input-group [apesSuffix]="appletSearchIcon">
          <input apes-input
                 placeholder="快速查找小程序..."
                 type="search"
                 (keyup)="appletSearch()">
        </apes-input-group>
        <ng-template #appletSearchIcon>
          <i class="anticon anticon-search"></i>
        </ng-template>
      </div>
      <div class="modal-applet-content">
        <button apes-button apesType="primary" (click)="addWidget()">添加新的小程序</button>
      </div>
    </div>
  </ng-template>
</apes-modal>

<!--编辑排版 -->
<apes-modal [(apesVisible)]="composeVisible" [apesTitle]="composeTitle" [apesContent]="composeContent"
            [apesFooter]="composeFooter" [apesClosable]="false">
  <ng-template #composeTitle>
    编辑排版
  </ng-template>

  <ng-template #composeContent>
    <p>选择仪表板布局</p>
    <ul class="modal-compose-main">
      <ng-container *ngFor="let item of presetLayoutModel,let i =index ">
        <li>
          <div class="modal-compose-content">
            <div class="layout-main" [ngClass]="item.class" (click)="editLayout(i)">a</div>
          </div>
        </li>
      </ng-container>
    </ul>
  </ng-template>

  <ng-template #composeFooter>
    <button apes-button apesType="default" (click)="closeCanvasDialog()">关闭</button>
  </ng-template>

</apes-modal>



